数据获取方法 (getServerSideProps, getStaticProps, getStaticPaths)

在Next.js中，数据获取是一个关键的概念，尤其是在构建动态和静态内容时。Next.js提供了三种主要的数据获取方法：getServerSideProps、getStaticProps和getStaticPaths。这些方法允许你在不同的场景下高效地获取数据，并将其渲染到页面上。

1. getServerSideProps

1.1 理论解释

getServerSideProps 是一种服务器端渲染（SSR）的方法。当你使用getServerSideProps时，Next.js会在每次请求时调用这个函数，并将返回的数据作为props传递给页面组件。这种方法非常适合需要实时数据或用户特定数据的场景。

1.2 代码示例

// pages/index.js
export async function getServerSideProps(context) {
  // 模拟从API获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

1.3 实践练习

1. 创建一个新页面pages/server-side.js。
2. 使用getServerSideProps从公共API（如https://jsonplaceholder.typicode.com/posts）获取数据。
3. 将获取的数据渲染到页面上。

2. getStaticProps

2.1 理论解释

getStaticProps 是一种静态站点生成（SSG）的方法。当你使用getStaticProps时，Next.js会在构建时调用这个函数，并将返回的数据作为props传递给页面组件。这种方法非常适合不需要实时更新的静态内容。

2.2 代码示例

// pages/static.js
export async function getStaticProps() {
  // 模拟从API获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function StaticPage({ data }) {
  return (
    <div>
      <h1>Static Site Generated Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

2.3 实践练习

1. 创建一个新页面pages/static.js。
2. 使用getStaticProps从公共API（如https://jsonplaceholder.typicode.com/posts）获取数据。
3. 将获取的数据渲染到页面上。

3. getStaticPaths

3.1 理论解释

getStaticPaths 通常与getStaticProps一起使用，用于生成动态路由的静态页面。当你有一个动态路由（如pages/[id].js）时，getStaticPaths会告诉Next.js哪些路径需要在构建时预渲染。

3.2 代码示例

// pages/[id].js
export async function getStaticPaths() {
  // 模拟从API获取路径
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // 模拟从API获取单个帖子数据
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

3.3 实践练习

1. 创建一个新页面pages/[id].js。
2. 使用getStaticPaths从公共API（如https://jsonplaceholder.typicode.com/posts）获取路径。
3. 使用getStaticProps获取单个帖子的数据。
4. 将获取的数据渲染到页面上。

4. 总结

• getServerSideProps 适用于需要实时数据或用户特定数据的场景。
• getStaticProps 适用于不需要实时更新的静态内容。
• getStaticPaths 与getStaticProps一起使用，用于生成动态路由的静态页面。

通过掌握这三种数据获取方法，你可以在Next.js中灵活地处理各种数据获取需求，从而构建高效、动态和静态的Web应用。